<template>
  <div class="Hotelorders">
    <div class="bj">
      <van-nav-bar title="酒店订单" style="background: #68c5ba;width: 100%;position: fixed;top: 0;">
        <van-icon @click="routejump" name="arrow-left" slot="left" color="#FFFFFF" />
      </van-nav-bar>
    </div>

    <div style="width: 100%;height: 46px;"></div>
    <div style="width: 100%;height: 100%;margin-top: 1.25rem;background: #f8f8f8;">
      <div class="ticket">
        <div style="width: 95%;height: 100%;">
          <div class="adult-ticket">
            <p style="color: #000000;font-weight: 600;">淄博周村全天门票</p>
          </div>
          <div class="rooms">
            <p class="rooms_txt">入住日期<span style="color: #5c5c5c;">每间房需1位入住人</span></p>
            <div class="rooms_select">
              <div><span style="color: #46d0ca;">{{Checkin}}</span>{{week1}}</div>
              <div style="color: #46d0ca;">共{{roomsday}}晚</div>
              <div><span style="color: #46d0ca;">{{Departure}}</span>{{week2}}</div>
            </div>
            <calendar class="rooms_time" v-on:change="calendarChange" :multiple="true"></calendar>
          </div>
          <div style="display: flex;align-items: center;">
            <span style="font-size: 16px;font-weight: 400;margin-right: 5px;">房间数</span>
            <van-stepper v-model="value" />
          </div>
          <div class="ddto">
            <div>李李李</div>
            <div @click="selectLinkMan">添加旅客</div>
          </div>
        </div>
      </div>
    </div>
    <div class="scheduler">
      <p class="scheduler_txt">预定人信息</p>
      <div class="scheduler_people">
        <div>潘德利</div>
        <div>新增/更换</div>
      </div>
      <div class="scheduler_data">
        <div class="data_name">
          <span>姓名：</span>
          <input type="text" placeholder="请输入您的姓名" />
        </div>
        <div class="data_phone">
          <span>手机号：</span>
          <input type="text" placeholder="用于接受订房信息" />
        </div>
      </div>
      <div style="width: 100%;height: 20px;"></div>
    </div>
    <div class="beizhu">
      <van-cell-group>
        <van-field v-model="message" rows="1" autosize label="订单备注:" type="textarea" placeholder="请输入备注" />
      </van-cell-group>
    </div>

    <div class="terms">
      <van-checkbox v-model="checked"></van-checkbox>
      <span style="margin-left: 4px;">已阅读并通用</span>
      <span style="color: #46d0ca;margin-left: 4px;">安易游预定条款</span>
    </div>
    <div style="width: 100%;height: 60px;"></div>
    <div class="bottom">
      <div class="detail">
        <span style="color: #f59a23;">总额￥336</span>
        <span style="color: #46d0ca;margin-left: 10px;">明细</span>
        <van-icon name="arrow-up" />
      </div>
      <van-button type="default" color="#46d0ca">去支付</van-button>
    </div>
  </div>
</template>

<script>
  // import ddVueCalendar "@/main.js";
  import {
    // ProductDetails,
    // Config,
    // DatePriceList,
  } from '@/api/home.js'
  export default {
    name: 'vdetails',
    data() {
      return {
        // isactive:true,
        // desc: false, //弹出订票须知
        checked: false, //协议
        // radio: '0',
        // terms: false, //弹出协议
        arrow: false, //费用明细
        riqishow: false, //日期

        value: 1, //房间数
        Checkin: '', //今天入住的日期
        roomsday: '1', //几晚
        Departure: '', //离店的日期
        week1: '',
        week2: '',
        message:'',//订单备注

        tepper: 0, //步进器
        price: '', //价格
        // riqi:true,
        data: {}, //数据
        config: [], //协议
        res: [], //日期数组
        time: '', //选择日期

        Todaysdate: [],
        name: this.$route.query.name, //获取  姓名
        phone: this.$route.query.phone, //获取 电话
        card: this.$route.query.card, //获取 身份证
        // qiri:'',//选择日期
        value1: 0,
        option1: [ //获取入园时间
          {
            text: '08:30-09:30 (余票100)',
            value: 0
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 1
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 2
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 3
          },
          {
            text: '08:30-09:30 (余票100)',
            value: 4
          },
        ],

      };
    },
    methods: {
      calendarChange(p, values, displayValues) {
        console.log(displayValues[0])
        this.roomsday = p.daysDiffer
        this.Checkin = displayValues[0]
        this.Departure = displayValues[1]
        this.week1 = this.getDateWeek(this.Checkin)
        this.week2 = this.getDateWeek(this.Departure)
      },
      getDateWeek: function(date) { //判断是周几
        var day = new Date(Date.parse(date));
        var today = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
        var week = today[day.getDay()];
        return week;
      },
      getBeforeDate(num, time) { //获取当前日期的前几天
        let n = num;
        let d = '';
        if (time) {
          d = new Date(time);
        } else {
          d = new Date();
        }
        let year = d.getFullYear();
        let mon = d.getMonth() + 1;
        let day = d.getDate();
        if (day <= n) {
          if (mon > 1) {
            mon = mon - 1;
          } else {
            year = year - 1;
            mon = 12;
          }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        let s = (year < 10 ? ('0' + year) : year) + '-' + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) :
          day);
        return s;
      },
      addDate() { //获取今天的日期
        let nowDate = new Date();
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        }
        // console.log(date);
        let time = date.year + '-' + date.month + '-' + date.date;
        // console.log(time)
        let arr = [];
        for (let i = -1; i < 1; i++) {
          arr.push(this.getBeforeDate(i, time))
        }
        // console.log(arr)
        this.Todaysdate = arr
        this.Checkin = arr[1]
        this.Departure = arr[0]
        this.week1 = this.getDateWeek(this.Checkin)
        this.week2 = this.getDateWeek(this.Departure)
        // this.end_time = date.year + '-' + date.month + '-' + date.date;
      },

      vanpopup() {
        this.riqishow = true;
      },
      selectdate(enable, year, month, day, money) { //选择日期
        // console.log(year, month, day);
        if (enable == 0) {
          // console.log('有')
          this.$dialog({
            message: '当前日期不可选中'
          });
        } else {
          this.time = year + '-' + month + '-' + day
          this.riqishow = false;
        }
      },
      arrowPopup() {
        this.arrow = true;
      },
      arrowtui() {
        this.arrow = false;
      },
      descPopup() { //弹出订票须知
        this.desc = true;
      },
      desctui() { //关闭订票须知
        this.desc = false;
      },
      termsPopup() { //弹出协议
        this.terms = true;
        // console.log(1)
      },
      termstui() { //关闭协议
        this.terms = false;
        // console.log(1)
      },
      onchange(value) {
        let shul = this.data.Price; //自定义一个值
        let tong = value * shul; //乘以当前计步器里面的值
        console.log(tong);
        this.price = tong;
      },
      // calendarChange(p, values, displayValues) {
      //   console.log("日历返回值：", p, values, displayValues)
      // },
      routejump() { //返回景区详情
        let id = this.$route.query.id
        this.$router.push({
          path: "/Scenic/product",
          query: {
            id: id,
          }
        })
      },
      selectLinkMan() { //跳转旅客列表
        // this.$router.push('/address');
        // let id = this.$route.query.id
        this.$router.push({
          path: "/Home/selectLinkMan",
          // query: {
          //   id: id,
          //   psn: this.$route.query.psn,
          // }
        })
      },
      // routeraddress() { //跳转旅客列表
      //   // this.$router.push('/address');
      //   let id = this.$route.query.id
      //   this.$router.push({
      //     path: "/address",
      //     query: {
      //       id: id,
      //       psn: this.$route.query.psn,
      //     }
      //   })
      // },

      // vdetailsdata() { //订单数据请求
      //   let self = this
      //   let data = {
      //     ssSN: this.$route.query.id, //标识
      //     pSN: this.$route.query.psn,
      //   }
      //   ProductDetails(data).then(res => { //订单数据请求
      //     console.log(res);
      //     self.data = res.Item
      //     self.price = res.Item.Price
      //     // console.log(self.price)
      //   })

      //   Config().then(data => {
      //     // console.log(data)
      //     self.config = data.clausecon
      //   })
      // },
      // qiridata() { //日期数据
      //   let data = {
      //     pSN: this.$route.query.psn,
      //     Begin: "2019-9-01",
      //     End: "2019-12-31",
      //   }
      //   DatePriceList(data).then(res => {
      //     console.log(res)
      //     // debugger
      //     this.res = res.List
      //     let arr = []
      //     const arrList = res.List.map(item => { //判断日期是星期几，然后循环给几个空格
      //       // console.log(item.days[0].wi, 'shuju')
      //       if (item.days[0].wi !== 0) {
      //         let s = item.days[0].wi
      //         for (var i = 0; i < s; i++) {
      //           item.days.unshift({})
      //         }
      //       }
      //       return item;
      //     })

      //     console.log(arrList)
      //   })
      // },
      //       obtain(enable) {//选择时间
      //         // console.log(val)
      //         // let nostate =nostate
      //         if (enable == 0) {
      //           // console.log('有')
      //           this.$dialog({ message: '当前日期不可选中' });
      //         } else {
      //           console.log('无')
      //
      //         }
      //       }
    },
    mounted() {
      // this.vdetailsdata()
      // this.qiridata()
      this.addDate()
    }
  }
</script>

<style lang="scss">
  .Hotelorders {
    width: 100%;
    height: 100%;
    position: relative;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .bj{
      .van-nav-bar{
        width: 100% !important;
        position: fixed;
        left: 0;
        .van-icon {
          color: white !important;

        }
      }

    }
    .ticket {
      /* 盒子 */
      width: 100%;
      height: auto;
      // border-radius: 0.625rem;
      background: #f8f8f8;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      border-bottom: 1px solid #eaeaea;

      .adult-ticket {
        /* 成人票 */
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
      }

      .rooms {
        .rooms_txt {
          padding: 10px 0;
          font-size: 16px;
          color: #000000;
          font-weight: 400;
          span {
            font-size: 13px;
            margin-left: 4px;
          }
        }

        .rooms_select {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 15px;
        }

        .rooms_time {
          // opacity: 0;
          height: 40px;
          margin-top: -30px;
          z-index: 9;

          .selectedDate {
            opacity: 0;
          }
        }
      }

      .ddto {
        display: flex;
        // height: 50px;
        width: 100%;
        flex-wrap: wrap;

        div {
          width: 22%;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border: 1px solid #46d0ca;
          font-size: 14px;
          font-weight: 400;
          // margin-right: 10px;
          color: #46d0ca;
          margin: 4px;
        }
      }
    }

    .scheduler {
      width: 100%;
      margin-top: 10px;
      background: #f8f8f8;

      .scheduler_txt {
        padding: 10px;
        font-size: 18px;
        font-weight: 400;
      }

      .scheduler_people {
        padding: 0 10px;
        display: flex;

        div {
          width: 80px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          border: 1px solid #46d0ca;
          margin-right: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #46d0ca;
        }
      }

      .scheduler_data {
        display: flex;
        flex-direction: column;
        margin-top: 10px;

        div {
          display: flex;
          width: 80%;
          margin: 5px auto;

          span {
            width: 22%;
            font-size: 14px;
          }

          input {
            background: none;
            font-size: 12px;
            outline: none;
          }
        }
      }

    }
    .beizhu{
       width: 100%;
       background: #f8f8f8;
       margin-top: 10px;
       .van-cell{
         background: #f8f8f8;
         .van-field__control{
           background: white;
           
         }
         textarea{
           font-size: 12px !important;
         }
       }
    }
    .terms {
      display: flex;
      margin-top: 20px;
      align-items: center;

      .van-checkbox__icon--checked .van-icon {
        background-color: #46d0ca !important;
        border-color: #46d0ca !important;

      }

      .van-icon {
        color: white !important;
        font-size: 16px !important;
      }
    }

    .bottom {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      background: #ececec;

      .detail {
        display: flex;
        font-size: 14px;
        font-weight: 400;
      }

      .van-button {
        padding: 0px 30px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
      }
    }
  }
</style>
